iT邦幫忙

3

新形態的 JavaScript程式庫(jQuery)

  • 分享至 

  • xImage
  •  

jQuery 是一個快速又 簡潔的JavaScript程式庫, 簡化了讓你在HTML文件裡面尋找DOM物件, 處理事件, 製作動畫, 和處理Ajax互動的過程 jQuery 是來改變你撰寫 JavaScript 的方式
文章的標題介紹:
你用10行的 jQuery 完成以往要20行左右枯燥的 DOM JavaScript. 在寫完那20行的時間你已經用兩三行的jQuery完成要完成的工作.一個全新的型態的程式庫,這邊幫您作一個簡單的入門簡介。

第一篇:How jQuery Works (http://docs.jquery.com/How_jQuery_Works)
內容摘要:
這是一個基本的教程,主要在幫助您開始使用jQuery。如果你沒有測試頁尚未成立,開始創建一個新的含有下列內容的HTML頁面:

<!doctype html>

  
    <meta charset="utf-8">
    <title>Demo</title>
  
  
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
      
    </script>
  

編輯在腳本標記的src屬性指向您的jquery.js副本。例如,如果jquery.js是在您的HTML文件相同的目錄中,你可以使用:

 <script src="jquery.js"></script>

第二篇:Getting Started with jQuery (http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery)
內容摘要:
Hello jQuery
我們先從一個空的HTML頁面:

 <script type="text/javascript" src="jquery.js"></script>          
 <script type="text/javascript">                                         
   // we will add our javascript code here                                     
 </script>                                                               
                                                                  
                                                                   
   <!-- we will add our HTML content here -->                                        
                                                                  
 

本頁面只加載jquery.js程式庫
我們註冊了一個文檔的ready事件。

 $(document).ready(function() {
   // do stuff when DOM is ready
 })

將以下程式碼加入的:

 <a href="">Link</a>

現在更新$(document).ready 處理程序。

$(document).ready(function() {
   $("a").click(function() {
     alert("Hello world!");
   });
 });

第三篇:Live Examples of jQuery (http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery)
內容摘要:
PS:此篇程式效果建議連到上列URL 中進行測試會更有感覺。
使用按鈕的左側,在例子中,下面的jQuery代碼上運行的結構性標記。顯示每個例如代碼將顯示需要進行更改的結構標記發生的jQuery代碼。
得到數列2段,並顯示在一個警告框。包括一個紅色框。

alert($("div.contentToChange p").size());

通過使用幻燈片動畫動畫在第2欄的段落。

$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言